<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>投诉报修</el-breadcrumb-item>
                    <el-breadcrumb-item>我的投诉</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>

        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="complaintForm.cDetail" placeholder="输入投诉详情">
                        <el-button slot="append" icon=" el-icon-search" @click="getComplaintListByDetail()"></el-button></el-input>
                </el-col>
            </el-row>
        </div>

        <div>
            <el-card>
            <el-tabs style=" margin-top: 0px;margin-bottom: 0px;" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部投诉" name="first">
                <div>
                    <div >
                        <el-table
                                :data="tableData.slice((complaintForm.number-1)*complaintForm.pagesize,complaintForm.number*complaintForm.pagesize)"
                                style="width: 100%">
                            <el-table-column
                                    prop="cid"
                                    label="投诉表编号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="投诉人"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cdetail"
                                    label="投诉详情"
                                    width="400"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ctime"
                                    label="投诉时间"
                                    width="150"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    label="处理结果"
                                    width="200"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="handle(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    prop="mstatus"
                                    label="操作"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                    <span v-if="scope.row.cstatus==2">已评价
                                        <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                </template>
                            </el-table-column>

                        </el-table>

                        <el-pagination
                                style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="complaintForm.pagenum"
                                :page-sizes="[2, 5, 10, 15]"
                                :page-size="complaintForm.pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="second">
                <div>
                    <div >
                        <el-table
                                :data="tableData1.slice((complaintForm1.number-1)*complaintForm1.pagesize,complaintForm1.number*complaintForm1.pagesize)"
                                style="width: 100%">
                            <el-table-column
                                    prop="cid"
                                    label="投诉表编号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="投诉人"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cdetail"
                                    label="投诉详情"
                                    width="400"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ctime"
                                    label="投诉时间"
                                    width="150"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    label="处理结果"
                                    width="200"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="handle(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    prop="mstatus"
                                    label="操作"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                    <span v-if="scope.row.cstatus==2">已评价
                                        <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                </template>
                            </el-table-column>

                        </el-table>

                        <el-pagination
                                style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                @size-change="handleSizeChange1"
                                @current-change="handleCurrentChange1"
                                :current-page="complaintForm1.pagenum"
                                :page-sizes="[2, 5, 10, 15]"
                                :page-size="complaintForm1.pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total1">
                        </el-pagination>
                    </div>

                </div>
            </el-tab-pane>

            <el-tab-pane label="未完成" name="third">
                <div>
                    <div >
                        <el-table
                                :data="tableData2.slice((complaintForm2.number-1)*complaintForm2.pagesize,complaintForm2.number*complaintForm2.pagesize)"
                                style="width: 100%">
                            <el-table-column
                                    prop="cid"
                                    label="投诉表编号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="投诉人"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cdetail"
                                    label="投诉详情"
                                    width="400"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ctime"
                                    label="投诉时间"
                                    width="150"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    label="处理结果"
                                    width="200"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="handle(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    prop="mstatus"
                                    label="操作"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                    <span v-if="scope.row.cstatus==2">已评价
                                        <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                </template>
                            </el-table-column>

                        </el-table>

                        <el-pagination
                                style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                @size-change="handleSizeChange2"
                                @current-change="handleCurrentChange2"
                                :current-page="complaintForm2.pagenum"
                                :page-sizes="[2, 5, 10, 15]"
                                :page-size="complaintForm2.pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total2">
                        </el-pagination>
                    </div>

                </div>
            </el-tab-pane>

            <el-tab-pane label="未评价" name="fourth">
                <div>
                    <div >
                        <el-table
                                :data="tableData3.slice((complaintForm3.number-1)*complaintForm3.pagesize,complaintForm3.number*complaintForm3.pagesize)"
                                style="width: 100%">
                            <el-table-column
                                    prop="cid"
                                    label="投诉表编号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="投诉人"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cdetail"
                                    label="投诉详情"
                                    width="400"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ctime"
                                    label="投诉时间"
                                    width="150"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    label="处理结果"
                                    width="200"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="handle(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    v-cloak
                                    prop="mstatus"
                                    label="操作"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.cstatus==0">待处理</span>
                                    <span v-if="scope.row.cstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                    <span v-if="scope.row.cstatus==2">已评价
                                        <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                </template>
                            </el-table-column>

                        </el-table>

                        <el-pagination
                                style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                @size-change="handleSizeChange3"
                                @current-change="handleCurrentChange3"
                                :current-page="complaintForm3.pagenum"
                                :page-sizes="[2, 5, 10, 15]"
                                :page-size="complaintForm3.pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total3">
                        </el-pagination>
                    </div>

                </div>
            </el-tab-pane>
        </el-tabs>
            </el-card>
        </div>

        <el-dialog title="维修情况" v-model="dialogVisible":visible.sync="dialogVisible" v-if='dialogVisible' :before-close="closeDiglog" >
            <el-form :model="gridForm"  ref="gridForm" >

                <el-form-item label="维修人" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.handleman"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="维修电话" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.cphone"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="检修维修详情" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.handleDetail"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="评价" v-model="dialogFormVisible":visible.sync="dialogFormVisible" :close-on-click-modal="false" >
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="form.cid" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="投诉人" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="投诉内容" :label-width="formLabelWidth">
                    <el-input v-model="form.cdetail" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="投诉时间" :label-width="formLabelWidth">
                    <el-input v-model="form.ctime" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人" :label-width="formLabelWidth">
                    <el-input v-model="form.handleman" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人电话" :label-width="formLabelWidth">
                    <el-input v-model="form.cphone" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理详情" :label-width="formLabelWidth">
                    <el-input v-model="form.handleDetail" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务评价" :label-width="formLabelWidth" prop="evaluate">
                    <el-rate
                            v-model="form.evaluate"
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                    </el-rate>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </div>

        </el-dialog>

    </div>

</template>

<script>
	import {checkEvaluate} from "../plugins/validator";

	export default {

		data() {

			return {
                total:'',
				total1:'',
				total2:'',
				total3:'',
				dialogTableVisible: false,
				value:null,
				dialogVisible:false,
				dialogFormVisible:false,
                tableData:null,
				tableData1:null,
				tableData2:null,
				tableData3:null,
                mark:0,
				activeName: 'first',
				complaintForm: {
					userName: '',
					cDetail:'',
                    number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm1: {
					userName: '',
					cDetail:'',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm2: {
					userName: '',
					cDetail:'',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm3: {
					userName: '',
					cDetail:'',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
                form:{
					cid:'',
					userName: '',
					cdetail: '',
					ctime: '',
					handleman:'',
					cphone:'',
					handleDetail: '',
                    evaluate:''
                },
                gridFrom:{
					handleman:'',
					cphone:'',
					handleDetail: '',
                },
                rules:{
					evaluate: [
						{ validator:checkEvaluate,trigger: 'change' },
					]
                },

				formLabelWidth: '120px'
			};

		},
		created() {
			this.getComplaintList()
            this.getComplaintListByStatus(0)
			this.getComplaintListByStatus(1)
			this.getComplaintListByStatus(2)
		},
		methods: {

			//根据投诉审核状态查询信息
			async getComplaintListByStatus(val) {
                console.log(val)
				const {data: resp} = await this.$http.get('/complaint/findByIDStatus/'+val)
				if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				if(this.complaintForm.pagenum!=1 && this.mark===0)
				{
					this.complaintForm.pagenum=1
					this.complaintForm.number=this.complaintForm.pagenum
					this.mark=1
				}
				this.complaintForm.number=this.complaintForm.pagenum

				if(val===0){
					this.tableData2 = resp.data
					this.total2 = resp.data.length
                    console.log(resp)
				}
				if(val===1){
					this.tableData1 = resp.data
					this.total1 = resp.data.length
					console.log(resp)
				}
				if(val===2){
					this.tableData3 = resp.data
					this.total3 = resp.data.length
					console.log(resp)
				}

			},
                // 监听 页大小 改变事件
			handleSizeChange(newSize) {
				// console.log(newSize)
				this.complaintForm.pagenum = 1
				this.complaintForm.pagesize = newSize
				if(this.complaintForm.cDetail===""){
					this.getComplaintList()
				}else{
					this.getComplaintListByName()
				}
			},
			// 监听 页码值 改变事件
			handleCurrentChange(newSize) {
				this.complaintForm.number = newSize
				this.complaintForm.pagenum = newSize
				if(this.complaintForm.cDetail===""){
					this.getComplaintList()
				}else{
					this.getComplaintListByName()
				}
			},
			// 监听 页大小 改变事件
			handleSizeChange1(newSize) {
				console.log(this.complaintForm1.pagenum )
				console.log(this.complaintForm1.number )
				this.complaintForm1.number = 1
				this.complaintForm1.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(1)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange1(newSize) {
				console.log(this.complaintForm1.pagenum )
				console.log(this.complaintForm1.number )
				this.complaintForm1.number = newSize
				this.complaintForm1.pagenum = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(1)
				// }else{
				// 	this.getRepairListByType()
				// }
			},
			// 监听 页大小 改变事件
			handleSizeChange2(newSize) {
				console.log(newSize)
				this.complaintForm2.pagenum = 1
				this.complaintForm2.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(0)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange2(newSize) {
				console.log(newSize)
				this.complaintForm2.number = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(0)
				// }else{
				// 	this.getRepairListByType()
				// }
			},

            // 监听 页大小 改变事件
			handleSizeChange3(newSize) {
				console.log(newSize)
				this.complaintForm3.pagenum = 1
				this.complaintForm3.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(3)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},

			// 监听 页码值 改变事件
			handleCurrentChange3(newSize) {
				this.complaintForm3.number = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(3)
				// }else{
				// 	this.getRepairListByType()
				// }
			},

            //删除投诉表
			async deleteComplaint(row) {
				const confirmResult = await this.$confirm(
					'此操作将永久删除该记录, 是否继续?',
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).catch(err => err)
				// 点击确定 返回值为：confirm
				// 点击取消 返回值为： cancel
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {data: resp} = await this.$http.delete('/complaint/deleteComplaintById/'+row.cid)

				this.getComplaintList()
				this.getComplaintListByStatus(0)
				this.getComplaintListByStatus(1)
				this.getComplaintListByStatus(2)

				// })
			},

            //查询个人所有投诉信息
			async getComplaintList() {

				const {data: resp} = await this.$http.get('/complaint/findByID')

                if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				// this.$message.success('登录成功')


				this.tableData = resp.data
				this.total = resp.data.length

			},

            //根据投诉详情查询
			async getComplaintListByDetail() {
				if(this.complaintForm.cDetail==null){
					this.getComplaintList()
				}else {
					const {data: resp} = await this.$http.get('/complaint/findByIDDetail/' + this.complaintForm.cDetail)
					if (resp.code !== 200) {
						return this.$message.error('获取用户列表失败！')
					}
					if (this.complaintForm.pagenum !== 1 && this.mark === 0) {
						this.complaintForm.pagenum = 1
						this.complaintForm.number = this.complaintForm.pagenum
						this.mark = 1
					}

					this.complaintForm.number = this.complaintForm.pagenum


					this.tableData = resp.data
					this.total = resp.data.length
					this.complaintForm.cDetail=null
				}
			},

            //提交评价表单
			submitForm(formName) {
				this.form.cstatus=2
				console.log(this.form)
				this.$refs[formName].validate(async valid => {
					if (valid) {
						const {data: resp} = await this.$http.put('/complaint/updateComplain',this.form)
						this.getComplaintList()
						this.getComplaintListByStatus(0)
						this.getComplaintListByStatus(1)
						this.getComplaintListByStatus(2)
						this.dialogFormVisible=false

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
            //将按钮与表单连接
			handle:function(index,row){
				this.dialogVisible=true;
				this.gridForm=Object.assign({},row);
			},
			//将按钮与表单连接
			evaluate:function(index,row){
				this.dialogFormVisible=true;
				this.form=Object.assign({},row);
			},
            //关闭表单
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleClick(tab, event) {
				console.log(tab, event);
			}

		},

	};
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

